import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  Platform,
} from "react-native";
import { BottomSheetItemProps } from "./types";
import { useTheme } from "@/contexts/ThemeContext";

/**
 * 底部弹出面板的选项项组件
 *
 * 模仿微信风格的底部弹出菜单选项，支持图标和文字
 * @author BelovedLYC
 */
const BottomSheetItem: React.FC<BottomSheetItemProps> = ({
  icon,
  iconColor,
  title,
  titleColor,
  danger = false,
  onPress,
  style,
  titleStyle,
  disabled = false,
  customContent,
}) => {
  const { colors } = useTheme();

  // 确定文字颜色
  const textColor = danger
    ? colors.status.error
    : titleColor || colors.text.primary;

  // 确定图标颜色
  const finalIconColor =
    iconColor || (danger ? colors.status.error : colors.primary);

  const handlePress = () => {
    if (!disabled && onPress) {
      onPress();
    }
  };

  return (
    <TouchableHighlight
      onPress={handlePress}
      underlayColor={colors.border.divider}
      disabled={disabled}
      style={[styles.container, disabled && styles.disabled, style]}
    >
      {customContent || (
        <View style={styles.content}>
          {icon && (
            <View style={styles.iconContainer}>
              {typeof icon === "string" ? (
                <Text style={[styles.icon, { color: finalIconColor }]}>
                  {icon}
                </Text>
              ) : (
                icon
              )}
            </View>
          )}
          <Text
            style={[
              styles.title,
              { color: disabled ? colors.text.disabled : textColor },
              titleStyle,
            ]}
          >
            {title}
          </Text>
        </View>
      )}
    </TouchableHighlight>
  );
};

const styles = StyleSheet.create({
  container: {
    width: "100%",
    paddingVertical: 16,
    paddingHorizontal: 16,
    justifyContent: "center",
    alignItems: "center",
  },
  content: {
    flexDirection: "row",
    alignItems: "center",
    width: "100%",
    justifyContent: "center", // 居中显示，微信风格
  },
  iconContainer: {
    marginRight: 10,
  },
  icon: {
    fontSize: 20,
  },
  title: {
    fontSize: 17,
    fontWeight: "400", // 微信使用中等字重
    textAlign: "center",
    ...Platform.select({
      ios: {
        fontFamily: "System",
      },
      android: {
        fontFamily: "sans-serif",
      },
    }),
  },
  disabled: {
    opacity: 0.5,
  },
});

export default BottomSheetItem;
